<template>
  <div class="my-image">
    <div class="img_btn" @click="dialogVisible=true">
      <!-- 如果默认的图片路径不存在，就显示默认图片 -->
      <!-- ../assets/default.png 默认图地址 -->
      <!-- <el-image :src='defaultImage'> -->
      <el-image :src='value'>
        <!-- 如果 defaultImage 不存在，就显示默认图片-->
        <div slot="error" class="image-slot">
          <img src="../assets/imgs/default.png" alt />
        </div>
      </el-image>
    </div>
    <!-- 弹窗效果 -->
    <!-- center 弹框可让内容居中显示 -->
    <el-dialog center @open='changeCollect' title="" :visible.sync="dialogVisible" width="400px">
      <el-tabs v-model="activeName" type="card">
        <!-- 素材管理 -->
        <el-tab-pane label="素材管理" name="image">
          <el-radio-group @change="changeCollect" v-model="filterParams.collect" size="small">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <!-- 素材列表 -->
          <!-- {selected: item.url === selectedImageUrl} 如果item.url === selectedImageUrl 为true 就添加类名（） -->
          <div class="img_list">
            <div @click="handleSelectImg(item.url)" class="img_item" :class="{selected: item.url === selectedImageUrl}" v-for="item in list" :key="item.id">
              <img :src="item.url" alt />
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination :hide-on-single-page="false" @current-change='changePage' :page-size='filterParams.per_page' :current-page='filterParams.page' background layout="prev, pager, next" :total="total">
          </el-pagination>
        </el-tab-pane>
        <!-- 上传图片 -->
        <el-tab-pane label="上传图片" name="upload">
          <el-upload :action="uploadURL" :headers='headers' :show-file-list="false" name='image' :on-success="handleSuccess">
            <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <!-- 确认取消按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="getImgPath" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { loadImageInfo } from '@/api/image.js'
import { baseURL } from '@/utils/request.js'
export default {
  name: 'MyCover',
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      // 发送请求的参数
      filterParams: {
        page: 1,
        per_page: 10,
        // 全部和收藏的状态 默认是选中全部
        collect: false
      },
      // 上传图片的路径
      uploadImageUrl: null,
      // 上传图片的路径
      uploadURL: baseURL + 'user/images',
      // 上传图片的请求头
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('mytoken')
      },
      // 当前图片的url
      selectedImageUrl: null,
      // 图片列表
      list: [],
      // 总页数
      total: 0,
      // 选项卡中选中的选项  默认是素材管理
      activeName: 'image',
      // 弹出框 默认不显示
      dialogVisible: false,
      // 默认图片
      defaultImage: null
    }
  },
  methods: {
    // 当点击确认调用
    getImgPath () {
      // 判断一下是提交素材里的图片还是上传里面的图片
      // 选的是素材里的
      if (this.activeName === 'image') {
        // 如果没有点击选择任何图片
        if (!this.selectedImageUrl) {
          return this.$message.error('请选择一张图片')
        } else {
          // 将图片显示出来 默认图片  但是父组件里点击发表时 并得不到这个图片地址  因为这个图在子组件内
          // 所以需要将该图地址传给父组件
          // this.defaultImage = this.selectedImageUrl

          // 子组件传给父组件
          this.$emit('input', this.selectedImageUrl)
        }
      } else {
        // 选的上传里的
        if (!this.uploadImageUrl) {
          return this.$message.error('请上传一张图片')
        } else {
          // 将图片显示出来 默认图片  但是父组件里点击发表时 并得不到这个图片地址  因为这个图在子组件内
          // 所以需要将该图地址传给父组件
          // this.defaultImage = this.uploadImageUrl

          // 子组件传给父组件
          this.$emit('input', this.uploadImageUrl)
        }
      }
      // 关闭弹窗
      this.dialogVisible = false
    },
    // 当上传图片成功
    async handleSuccess (ret) {
      console.log(ret)
      this.uploadImageUrl = ret.data.url
    },
    // 点击图片时
    handleSelectImg (url) {
      this.selectedImageUrl = url
    },
    // 当当前页发生变化时 触发
    async changePage (newPage) {
      // 将当前页的值赋值给page
      this.filterParams.page = newPage
      // 重新渲染页面
      this.loadImageInfo()
    },
    // 当切换全部和收藏时触发和当弹出层弹出时触发
    changeCollect () {
      this.filterParams.page = 1
      // 当已进入弹出层就调用获取素材函数
      this.loadImageInfo()
    },
    // 获取图片列表
    async loadImageInfo () {
      try {
        const ret = await loadImageInfo(this.filterParams)
        // console.log(ret)
        // 获取图片
        this.list = ret.data.results
        // 获取总页数
        this.total = ret.data.total_count
      } catch (error) {
        this.$message.error('获取素材列表失败')
      }
    }
  }
}
</script>
<style scoped lang="less">
.my-image {
  display: inline-block;
  margin-right: 20px;
  .img_btn {
    width: 150px;
    height: 150px;
    border: 1px dashed #ddd;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
.img_list {
  margin-top: 10px;
  .img_item {
    width: 150px;
    height: 120px;
    border: 1px dashed #ddd;
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
    &.selected {
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.3) url(../assets/imgs/selected.png)
          no-repeat center / 50px;
      }
    }
  }
}
.el-tabs__content {
  text-align: left;
}
</style>
